import React, {useEffect, useState} from 'react';
import {Breadcrumbs, Grid, Link, Paper, TextField, Typography} from "@material-ui/core";
import {scrollToTop} from "../../../../assets/functions/functions";
import {makeStyles} from "@material-ui/styles";
import ScrollToTop from "../Common/ScrollTopWrapper/ScrollTopWrapper";
import NavigateNextIcon from "@material-ui/icons/NavigateNext";

const useStyles = makeStyles(theme => ({
  gutter: {
    margin: theme.spacing(2, 0, 2, 0)
  },
  textBox: {
    padding: theme.spacing(1, 2, 1, 2),
    borderRadius: "12px 4px 12px 4px"
  },
}))

export default function Demo() {
  const styles = useStyles();
  const [selection, setSelection] = useState({
    iframeLink: "",
    inserted: false,
  });
  const [hover, setHover] = useState(2);
  const [breadcrumbs, setBreadcrumbs] = useState([
    <Link
      underline="hover"
      variant="h6"
      color="textPrimary"
      href="/"
      onClick={(e) => e.preventDefault()}
    >
      Demo
    </Link>
  ]);

  useEffect(() => {
    scrollToTop();
  }, []);

  const handleSetIframeLink = (e) => {
    const {name, value} = e.target;
    setSelection({
      ...selection,
      [name]: value,
      inserted: false
    });
  };


  return (
    <>
      <Breadcrumbs
        separator={<NavigateNextIcon fontSize="large"/>}
        aria-label="breadcrumb"
        style={{marginBottom: 16}}
      >
        {breadcrumbs}
      </Breadcrumbs>

      <Grid container direction="column">

        <Grid item xs={12} lg={8}>
          <Paper elevation={hover} className={styles.textBox} onMouseEnter={() => setHover(5)}
                 onMouseLeave={() => setHover(2)}>
            <TextField autoFocus id="iframeLink" name="iframeLink" multiline required margin="dense"
                       value={selection.iframeLink}
                       onChange={handleSetIframeLink}
                       placeholder="Test by pasting your copied code here" fullWidth
            />
          </Paper>

        </Grid>
      </Grid>

      <Grid container className={styles.gutter}>
        <Grid item style={{backgroundColor: "#fff"}}>
          <div dangerouslySetInnerHTML={{__html: selection.iframeLink}}/>
        </Grid>

      </Grid>

      <ScrollToTop/>
    </>
  );
}
